import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:macnov/common/loading.dart';
import 'package:macnov/common/search_box.dart';
import 'package:macnov/common/txn_avatar.dart';
import 'package:macnov/models/transaction.dart';
import 'package:macnov/stores/transaction.dart';
import 'package:macnov/utils/colorUtil.dart';

class TransactionList extends StatelessWidget {
  Widget _renderAmount(txn) {
    return Text(
      r'$' + txn.amount,
      style: TextStyle(
          fontWeight: FontWeight.w600,
          fontSize: 18,
          color: ColorsUtil.hexColor(0x282828)),
    );
  }

  _goTxnDetail(BuildContext context, TransactionModel txn) {
    Navigator.pushNamed(context, '/txndetail', arguments: txn);
  }

  Widget _renderList(BuildContext context) {
    return Observer(
      builder: (_) => txnStore.txns.length == 0
          ? Loading()
          : ListView.builder(
              itemCount: txnStore.filterTxns.length,
              itemBuilder: (_, index) {
                TransactionModel txn = txnStore.filterTxns[index];
                return Card(
                  child: ListTile(
                    onTap: () => _goTxnDetail(context, txn),
                    leading: SizedBox(
                      width: 48,
                      height: 48,
                      child: TxnAvatar(
                        txn: txn,
                      ),
                    ),
                    title: Text(
                      txn.merchant,
                      maxLines: 1,
                      style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          color: ColorsUtil.hexColor(0x282828)),
                    ),
                    subtitle: Row(
                      children: <Widget>[
                        Image.asset(
                          'assets/txn/category.png',
                          width: 20,
                          height: 20,
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 4),
                          width: Platform.isIOS ? 160 : 120,
                          child:
                              Text(txn.category, overflow: TextOverflow.visible,maxLines: 1,),
                        ),
                      ],
                    ),
                    trailing: this._renderAmount(txn),
                  ),
                );
              },
            ),
    );
  }

  _search(text) {
    if (null != text) {
      txnStore.filter(text);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          right: 0,
          top: 10,
          child: Container(
            margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
            child: SearchBox(
              onChange: _search,
            ),
          ),
        ),
        Container(
            margin: EdgeInsets.fromLTRB(0, 60, 0, 0),
            child: _renderList(context))
      ],
    );
  }
}
